<template>
  <section class="data_screen_lf">
    <div class="scroll_auto">
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">区县健康度评分</span>
        </div>
        <div class="scritm_cont">
          <left-chart-1 ref="refLeftChart1" :chart-data="leftChart1Data" />
        </div>
      </div>
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">基站健康度分布情况</span>
        </div>
        <div class="scritm_cont">
          <left-chart-2 ref="refLeftChart2" :chart-data="leftChart2Data" />
        </div>
      </div>
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">五维评分雷达图</span>
        </div>
        <div class="scritm_cont radar_wrap">
          <div class="data_dot_list inline">
            <ul>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>质量<b>{{ qualityScore }}</b></span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>故障<b>{{ alaramScore }}</b></span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>环境<b>{{ envScore }}</b></span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>价值<b>{{ profitScore }}</b></span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>感知<b>{{ perceptionScore }}</b></span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
          <left-chart-3 ref="refLeftChart3" :chart-data="leftChart3Data" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 组件
import LeftChart1 from "../components/chart/LeftChart1.vue";
import LeftChart2 from '../components/chart/LeftChart2.vue'
import LeftChart3 from '../components/chart/LeftChart3.vue'
// api相关
import { apiCommon } from "@/utils/index.js";
import * as screenApi from "@/api/screen/screen";
// store
import { screenDataStore } from '@/store/modules/screen.js'  // store

import mittBus from "@/utils/mittBus"; // mitt

const screenStoreData = screenDataStore()
const { setDistrictCounty } = screenDataStore()

const refLeftChart1 = ref(null)
const leftChart1Data = ref([])

const refLeftChart2 = ref(null)
const leftChart2Data = ref([])

const refLeftChart3 = ref(null)
const leftChart3Data = ref([])

const envScore = ref(0)
const alaramScore = ref(0)
const qualityScore = ref(0)
const profitScore = ref(0)
const perceptionScore = ref(0)

// 区县健康度评分
const getLeftChart1Data = async () => {
  // 获取接口数据接口
  const resDataData = await apiCommon(screenApi.getDistrictCounty, err => {
    refLeftChart1.value.chatLoading("end")
    mittBus.emit('setLeftChart1Loading');
  });
  mittBus.emit('setLeftChart1Loading');
  let countyData = resDataData.data
  //遍历countyData
  let data = []
  countyData.forEach(item => {
    let temp = {
      name: item.county,
      dailyAverage: item.dayHealthyAvgScore,
      monthlyAverage: item.monthHealthyAvgScore
    }
    data.push(temp)
  })

  leftChart1Data.value = data

  setDistrictCounty(leftChart1Data.value)
}

// 基站健康度分布情况
const getLeftChart2Data = async () => {
  // 获取接口数据接口
  const resDataData = await apiCommon(screenApi.getDistributionInfo, err => {
    refLeftChart2.value.chatLoading("end")
  });
  //遍历resDataData
  let distributionData = resDataData.data
  let temp1 = 0, temp2 = 0, temp3 = 0, temp4 = 0, temp5 = 0
  distributionData.forEach(item => {
    if (item.section == '90-100') {
      temp1 = item.stationCount
    } else if (item.section == '80-90') {
      temp2 = item.stationCount
    } else if (item.section == '70-80') {
      temp3 = item.stationCount
    } else if (item.section == '60-70') {
      temp4 = item.stationCount
    } else if (item.section == '60分以下') {
      temp5 = item.stationCount
    }
  })

  const opacity = '.35'

  // const colorArr = ['#D65755', '#8B6BE9', '#F0D18C', '#4389F6', '#EE9D73']
  const colorArr = [
    refLeftChart2.value.setColor('#D65755', `rgba(214, 87, 85, ${opacity})`),
    refLeftChart2.value.setColor('#8B6BE9', `rgba(139, 107, 233, ${opacity})`),
    refLeftChart2.value.setColor('#F0D18C', `rgba(240, 107, 140, ${opacity})`),
    refLeftChart2.value.setColor('#4389F6', `rgba(67, 137, 246, ${opacity})`),
    refLeftChart2.value.setColor('#EE9D73', `rgba(238, 157, 115, ${opacity})`)
  ]

  // 数据处理
  leftChart2Data.value = resDataData.data.map((item, index) => {
    return {
      name: item.section,
      value: item.stationCount,
      itemStyle: { color: colorArr[index] }
    }
  })
  // console.log(leftChart2Data.value)

  // 假数据 -- 数据处理已完成,使用接口数据,假数据注释即可
  leftChart2Data.value = [
    {
      name: '90-100分', value: temp1, itemStyle: {
        color: refLeftChart2.value.setColor('#D65755', `rgba(214, 87, 85, ${opacity})`),
      }
    },
    {
      name: '80-90分', value: temp2, itemStyle: {
        color: refLeftChart2.value.setColor('#8B6BE9', `rgba(139, 107, 233, ${opacity})`),
      }
    },
    {
      name: '70-80分', value: temp3, itemStyle: {
        color: refLeftChart2.value.setColor('#F0D18C', `rgba(240, 107, 140, ${opacity})`),
      }
    },
    {
      name: '60-70分', value: temp4, itemStyle: {
        color: refLeftChart2.value.setColor('#4389F6', `rgba(67, 137, 246, ${opacity})`),
      }
    },
    {
      name: '60分以下', value: temp5, itemStyle: {
        color: refLeftChart2.value.setColor('#EE9D73', `rgba(238, 157, 115, ${opacity})`)
      }
    },
  ]
}

// 五维评分雷达图
const getLeftChart3Data = async () => {
  // 获取接口数据接口
  const resDataData = await apiCommon(screenApi.getRadarChartData, err => {
    refLeftChart3.value.chatLoading("end")
  });

  // 数据处理
  leftChart3Data.value = []
  for (let item in resDataData.data) {
    if (!resDataData.data[item]) {
      resDataData.data[item] = 0
    }
    leftChart3Data.value.push({
      name: '',
      enName: item,
      value: resDataData.data[item]
    })
  }
  leftChart3Data.value.forEach(item => {
    switch (item.enName) {
      case 'envAvgScore':
        item.name = '基站环境'
        envScore.value = item.value
        break;
      case 'alarmAvgScore':
        item.name = '故障告警'
        alaramScore.value = item.value
        break;
      case 'perceptionAvgScore':
        item.name = '用户感知'
        perceptionScore.value = item.value
        break;
      case 'profitAvgScore':
        item.name = '站点价值'
        profitScore.value = item.value
        break;
      case 'qualityAvgScore':
        item.name = '网络质量'
        qualityScore.value = item.value
        break;
    }
  })
}

// 重置图表
const resetChart = () => {
  refLeftChart1.value && refLeftChart1.value.resetChart()
  refLeftChart2.value && refLeftChart2.value.resetChart()
  refLeftChart3.value && refLeftChart3.value.resetChart()
}

// 初始化图表数据
const initChartData = () => {
  getLeftChart1Data()
  getLeftChart2Data()
  getLeftChart3Data()
}
initChartData()

/**
 * 暴露方法
 */
defineExpose({
  resetChart
})
</script>

<style lang="scss" scoped>
.data_screen_lf {
  .dt_scrn_item {
    .scritm_cont {
      &.radar_wrap {
        .data_dot_list {
          &.inline {
            ul {
              margin: 1.5% auto 0;
              justify-content: space-between;
            }
          }
        }

        .chart_wrap {
          height: calc(100% - 26px) !important;
        }
      }
    }
  }
}
</style>